<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-rank"></i> 队列管理界面
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">

        <div class="handle-box">
          <div class="handle-box-left">
            <el-input v-model="queryInfo.SeaList" id="search-line" placeholder="请输入队列ID" class="handle-input mr10"></el-input>
            <el-button id="search-button" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </div>
          <div class="handle-box-right">
            <el-button type="primary" icon="el-icon-lx-friendadd" round>增加队列（暂无）</el-button>
          </div>
        </div>

      <el-table :data="Llist" @sort-change="SortChange" @filter-change="filterChange" border class="table" ref="multipleTable" header-cell-class-name="table-header" stripe>
        //当前车辆
        <el-table-column v-model="downlist" type="expand">
          <template v-model="downlist" #default="scope">
            <div class="detail">{{IschargingVehicle(scope.row)}}</div>
            <div v-if="downlist">
              <p class="detail">请求充电用户编号: {{scope.row.chargingVehicle.customerId}}</p>
              <p class="detail">请求充电的车辆编号: {{ scope.row.chargingVehicle.vehicleId }}</p>
              <p class="detail">剩余电量(千瓦时): {{ scope.row.chargingVehicle.leftEnergy }}</p>
              <p class="detail">总电量: {{ scope.row.chargingVehicle.totalEnergy }}</p>
              <p class="detail">最大接受充电功率（用户请求）: {{ scope.row.chargingVehicle.chargePower }}</p>
              <p class="detail">实际充电功率: {{ scope.row.chargingVehicle.realChargePower }}</p>
              <p class="detail">预计充电时间: {{ scope.row.chargingVehicle.estimateChargeTime }}</p>
              <p class="detail">预计等待时间: {{ scope.row.chargingVehicle.estimateWaitTime }}</p>
              <p class="detail">电量百分比: {{ scope.row.chargingVehicle.batteryPercent }}</p>
              <p class="detail">车辆当前的坐标: ({{ scope.row.chargingVehicle.latitude}},{{ scope.row.chargingVehicle.longitude}})</p>
              <p class="detail">遇到故障是否自动切换充电桩: {{ scope.row.chargingVehicle.autoFix }}</p>
            </div>
          </template>
        </el-table-column>
        //充电桩ID
        <el-table-column prop="pileID" width="60%" label="ID" align="center">
          <template #default="scope">{{scope.row.pileID }}</template>
        </el-table-column>
        //最大输出功率
        <el-table-column prop="chargePower" label="最大功率" sortable="custom" align="center">
          <template #default="scope">{{scope.row.chargePower }}</template></el-table-column>
        //充电桩状态
        <el-table-column prop="state" label="当前状态" align="center">
          <template #default="scope">{{scope.row.state}}</template>
        </el-table-column>
        //等待时间（等待插入/等待驶离/等待拔出/等待驶入）
        <el-table-column prop="waitMinutes" label="等待时间" sortable="custom" align="center">
          <template #default="scope">{{scope.row.waitMinutes}}</template>
        </el-table-column>
        //充满剩余时间
        <el-table-column prop="leftMinutes" label="充满剩余时间" sortable="custom" align="center">
          <template #default="scope">{{scope.row.leftMinutes}}</template>
        </el-table-column>
        //队列等待长度
        <el-table-column prop="waitLength" label="队列长度" sortable="custom" align="center">
          <template #default="scope">{{scope.row.waitLength}}</template>
        </el-table-column>
        //总的等待时间
        <el-table-column prop="totalWaitTime" label="总时长" sortable="custom" align="center">
          <template #default="scope">{{scope.row.waitLength}}</template>
        </el-table-column>
        //是否在充电
        <el-table-column prop="charge" label="是否正充电" align="center">
          <template #default="scope">{{scope.row.charge}}</template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="pageIndex" :page-size="pageSize" :total="totalElements" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "basetable",
  data() {
    return {
      // 查询参数对象
      queryInfo: {
        SeaList: null,
        orderBy: "waitLength",
        page: 1,
        pageSize: 5,
        asc: true,
        active: true,
        error: false,
      },
      addForm: {
        chargePower: null,
        latitude: null,
        longitude: null,
        dc: false,
      },
      sortItem: [
        {
          value: "chargePileId",
          label: "充电桩ID",
        },
        {
          value: "chargePower",
          label: "充电桩功率",
        },
        {
          value: "chargeHours",
          label: "总充电时间",
        },
        {
          value: "installDate",
          label: "安装时间",
        },
      ],
      EditItem: [
        {
          value: "chargePower",
          label: "充电桩功率",
        },
        {
          value: "chargeHours",
          label: "总充电时间",
        },
        {
          value: "latitude",
          label: "纬度",
        },
        {
          value: "longitude",
          label: "经度",
        },
      ],
      // 商品列表
      Llist: [],
      // 总数据条数
      totalElements: 0,
      // 当前页
      pageIndex: 1,
      // 页大小
      pageSize: 0,
      // 总页数
      pageTotal: 0,
      // 当前车辆下拉框
      downlist: false,
    };
  },
  created() {
    this.getLList();
  },
  methods: {
    // 根据分页获取对应的商品列表
    async getLList() {
      const {
        totalPages: pageTotal,
        totalElements: totalElements,
        content: Llist,
        size: pageSize,
        number: pageIndex,
      } = await this.$axios.get(
          `queue/wait/${this.queryInfo.orderBy}/${this.queryInfo.page}/${this.queryInfo.pageSize}/${this.queryInfo.asc}`
      );
      this.totalElements = totalElements;
      this.pageTotal = pageTotal;
      this.pageSize = pageSize;
      this.pageIndex = pageIndex + 1;
      this.Llist = Llist;
    },
    async handleSearch() {
      this.Pilelist = [];
      await this.$axios
          .get(`queue/admin/${this.queryInfo.SeaList}`)
          .then((res) => {
            this.Llist[0] = res;
            if (res === "") this.Llist = [];
            let len = this.Llist.length;
            this.totalElements = len;
            this.pageTotal = len;
            this.pageSize = len;
            this.pageIndex = len;
          });
    },
    handlePageChange(newPage) {
      this.queryInfo.page = newPage;
      this.getLList();
    },
    SortChange(column) {
      if (column.prop === null) return;
      this.queryInfo.asc = column.order === "ascending" ? true : false;
      this.queryInfo.orderBy = column.prop;
      this.getLList();
    },
    IschargingVehicle(NowList){
      console.log(NowList.chargingVehicle)
      if(NowList.chargingVehicle === undefined){
        this.downlist = false;
        return '当前队列为空';
      }else {
        this.downlist = true;
        return;
      }
    },
  },
};
</script>

<style scoped>
.detail{
  font-size: 16px;
}
.handle-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
